<template>
  <div class="register">
    <el-button
      type="danger"
      class="genarateImg"
      @click="genarateImage">生成图片</el-button>
    <div class="imageWrapper">
      <img
        class="real_pic"
        :src="dataURL">
    </div>
    <section
      ref="imageWrapper"
      class="form_container">
      <div class="manage_tip">
        <el-form
          ref="registerForm"
          :model="registerUser"
          :rules="rules"
          class="registerForm">
          <el-form-item
            prop="name">
            <el-input
              v-model="registerUser.name"
              placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item
            prop="email">
            <el-input
              v-model="registerUser.email"
              placeholder="请输入email" />
          </el-form-item>
          <el-form-item
            prop="password">
            <el-input
              v-model="registerUser.password"
              type="password"
              placeholder="请输入密码" />
          </el-form-item>
          <el-form-item
            prop="password2">
            <el-input
              v-model="registerUser.password2"
              type="password"
              placeholder="请再次输入密码" />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="registerUser.identity"
              style="width:100%"
              placeholder="请选择身份">
              <el-option
                label="管理员"
                value="manager" />
              <el-option
                label="员工"
                value="emplyee" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="submit_btn"
              @click="submitForm('registerForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: 'Register',
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerUser.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dataURL: '',
      registerUser: {
        name: '',
        email: '',
        password: '',
        password2: '',
        identity: ''
      },
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2-30个字符之间', trigger: 'blur' }
        ],
        email: [
          { type: 'email', required: true, message: '邮箱格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在6-30之间', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 30, message: '长度在6-30之间', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    genarateImage() {
      html2canvas(this.$refs.imageWrapper).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        console.log(dataURL)
        this.dataURL = dataURL
        // this.downloadFile(new Date().getTime(), this.dataURL)
      })
    },
    // 下载图片
    downloadFile(fileName, content) {
      const aLink = document.createElement('a')
      const blob = this.base64ToBlob(content) // new Blob([content]);

      const evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)

      aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))// 兼容火狐
    },
    // base64转blob
    base64ToBlob(code) {
      const parts = code.split(';base64,')
      const contentType = parts[0].split(':')[1]
      const raw = window.atob(parts[1])
      const rawLength = raw.length

      const uInt8Array = new Uint8Array(rawLength)

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/api/users/register', this.registerUser)
            .then(res => {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
            })
          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100% !important;
}
.form_container {
  width: 370px;
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  margin: 0 auto;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: 'Microsoft YaHei';
  font-weight: bold;
  font-size: 26px;
  color: #fff;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}
.submit_btn {
  width: 100%;
}
.genarateImg{
    margin: 30px 0;
}
</style>

